<template>
  <div class="common_container">
    <div class="publish_content">
      <div style="display: flex;align-items: center">
        <div class="tab_index">
          <div class="oneTab" :class="submitData.type === 1 ? 'action' : ''" @click="clickTab(1)">甲方需要</div>
          <div class="oneTab" :class="submitData.type === 2 ? 'action' : ''" @click="clickTab(2)">乙方提供</div>
        </div>
        <p class="font12 notice_publish" style="margin-left: 30px;">
          <img src="@/assets/image/ic_warn.png" style="width: 11px;">
          完善个人名片后，合作效率合作信任度会更高。
          <span class="link" @click="toMy">点击完善个人名片</span>
          <span class="right_arrow"></span>
        </p>
      </div>
      <div class="ptb20 border">
        <el-input v-model="submitData.requirementTitle">
          <template #prepend>
            {{ submitData.type === 1 ? '我需要' : '我提供'}}
          </template>
        </el-input>
        <p class="font12 redd" style="text-decoration: underline;margin-top: 5px">
          <img src="@/assets/image/ic_warn1.png" style="width: 11px;">
          发布请遵循
          <router-link to="/articleDetail?id=1" class="redd" target="_blank">《合作信息发布规范》</router-link>
        </p>
      </div>
      <div style="display: flex;align-items: center;padding: 10px 0">
        <p class="cl333 font14" style="margin-right: 10px">合作领域</p>
        <div class="screen-span">
          <template v-for="item in listDomainList">
            <span :class="submitData.requirementDomainId.indexOf(item.id) !== -1 ? 'thisCssNav' : ''" @click="selectDomain(item.id)">{{ item.requirementDomainName }}</span>
          </template>
        </div>
      </div>
      <div style="display: flex;align-items: center;padding: 10px 0">
        <p class="cl333 font14" style="margin-right: 10px">合作区域</p>
        <div class="screen-span">
          <template v-for="item in listAreaList">
            <span :class="submitData.requirementAreaId.indexOf(item.id) !== -1 ? 'thisCssNav' : ''" @click="selectArea(item.id)">{{ item.requirementAreaName }}</span>
          </template>
        </div>
      </div>
      <div>
        <p class="cl333 font14 pt15">{{ submitData.type === 1 ? '需求描述' : '服务描述' }}<span class="font12 cl999 ml8">(选填)</span></p>
        <el-input
            v-model="submitData.requirementDesc"
            type="textarea" class="textarea_desc"
            :placeholder="submitData.type === 1 ? '为了提高合作对接的效率，请尽可能详细地描述您的需求，包括但不限于项目背景、当前问题、其他个性化需求等。' : '为了提高甲方爸爸选择与您合作的机会，必须补充说明您所提供服务的详细内容，包括但不限于成功案例、数据、经验等。（不能包含联系方式）'"
            :rows="5" />
      </div>
      <div>
        <p class="cl333 font14 mt20 pt15 mb10">相关图片<span class="font12 cl999">(选填，图中不能带有联系方式)</span></p>
        <uploadimg :acceptText="'(最多9张)'" :limit="9" :values="imgList" @saveImg="addImg($event,'imageList')" />
      </div>
      <div>
        <p class="cl333 font14 pt15 mb10">联系方式<span class="font12 cl999">(联系电话、微信号至少填一项)</span></p>
        <el-row :gutter="20">
          <el-col :span="6" style="display: flex;align-items: center">
            <em class="icon-form-phone"></em>
            <el-input v-model="submitData.requirementContactMobile" />
          </el-col>
          <el-col :span="6" style="display: flex;align-items: center">
            <em class="icon-form-watch"></em>
            <el-input v-model="submitData.requirementWechat" />
          </el-col>
          <el-col :span="6" v-if="submitData.type === 1">
            <el-switch
                v-model="submitData.isRefresh"
                class="ml-2"
                inline-prompt
                style="--el-switch-on-color: #409eff; --el-switch-off-color: #dcdfe6;"
                active-text="每4小时自动刷新"
                inactive-text="每4小时自动刷新"
                :active-value="1"
                :inactive-value="0"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="text-align: center">
      <el-button type="primary" round style="width: 250px" :loading="LoadingBool" @click="submit">确认发布</el-button>
    </div>

    <!--完善公司信息-->
    <div v-if="perfectBool">
      <div class="perfectAlert" @click="closePerfect"></div>
      <div class="perfectConWin">
        <div class="perfectConWin-title">
          <p class="font12 notice_publish" style="margin-bottom: 15px;">
            <img src="@/assets/image/ic_warn.png" style="width: 11px;">
            完善信息后可享受发布服务的特权，合作效率合作信任度会更高。
          </p>
        </div>
        <div>
          <label class="form-label"><span>*</span>姓名</label>
          <el-input v-model="companyInfo.nickname" />
        </div>
        <div>
          <label class="form-label"><span>*</span>公司</label>
          <el-input v-model="companyInfo.companyName" />
        </div>
        <div>
          <label class="form-label"><span>*</span>职位</label>
          <el-input v-model="companyInfo.jobTitle" />
        </div>
        <div>
          <label class="form-label"><span>*</span>品牌</label>
          <el-input v-model="companyInfo.brand" />
        </div>
        <div style="margin-top: 15px;text-align: center">
          <el-button @click="closePerfect">取消</el-button>
          <el-button type="primary" :loading="perfectLoading" @click="perfectSubmit">保存</el-button>
        </div>
      </div>
    </div>
    <!--完善公司信息-->
  </div>
</template>
<script setup lang="ts">
import uploadimg from "@/components/uploadImg/index.vue";
import {listDomainAll, createRequirement, detailApi, updateRequirement, userInfoApi, listAreaAll, editCompanyInfo} from "@/api/api";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const LoadingBool = ref(false)
const perfectBool = ref(false)
const isCompleteCompanyInfo = ref(false)
const perfectLoading = ref(false)
const router = useRouter();
const route = useRoute();
interface InterfaceDomain {
  id: string
  requirementDomainName: string
}
interface NumberArray {
  type: number
  requirementTitle: string
  requirementDesc: string
  requirementContactMobile: string
  requirementWechat: string
  remarkMobile: string
  isRefresh: number
  imageList: string[]
  requirementDomainId: string[]
  requirementAreaId: string[]
}
const submitData = ref<NumberArray>({
  type: 1,
  requirementTitle: '',
  requirementDomainId: [],
  requirementAreaId: [],
  requirementDesc: '',
  requirementContactMobile: '',
  requirementWechat:'',
  remarkMobile: '',
  isRefresh: 1,
  imageList: []
})
const companyInfo = ref({
  brand: "",
  companyName: "",
  jobTitle: "",
  nickname: ""
})
interface imgIn{
  url: string
}
interface InterfaceArea {
  id: string
  requirementAreaName: string
}
const imgList = ref<imgIn[]>([])
const listDomainList = ref<InterfaceDomain[]>([])
const listAreaList = ref<InterfaceArea[]>([])
const getIsCompleteCompanyInfo = () => {
  userInfoApi().then((res:any) => {
    isCompleteCompanyInfo.value = res.data.isCompleteCompanyInfo
  })
}
getIsCompleteCompanyInfo()
const getDomainAll = () => {
  listDomainAll().then((res:any) => {
    listDomainList.value = res.data
  })
}
getDomainAll()
const getAreaAll = () => {
  listAreaAll().then((res:any) => {
    listAreaList.value = res.data
  })
}
getAreaAll()
const clickTab = (type:number) => {
  if (type === 1) {
    submitData.value.type = type
    submitData.value.isRefresh = 1
  } else {
    submitData.value.type = type
    submitData.value.isRefresh = 0
  }
}
const addImg = (data:any, name:any) => {
  submitData.value[name] = data.map((item:any) => {return item.url})
}
const submit = () => {
  if (!submitData.value.requirementTitle) {
    ElMessage.warning(submitData.value.type === 1 ? '请输入需求标题' : '请输入提供标题')
    return false
  }
  if (!submitData.value.requirementContactMobile && !submitData.value.requirementWechat) {
    ElMessage.warning('请输入联系方式')
    return false
  }
  if (submitData.value.type === 2 && !isCompleteCompanyInfo.value) {
    perfectBool.value = true
    ElMessage.warning('请先完善公司信息')
    return false
  }
  LoadingBool.value = true
  if (route.query.id) {
    submitData.value['id'] = route.query.id
    updateRequirement(submitData.value).then((res:any) => {
      LoadingBool.value = false
      if (res.code === 200) {
        ElMessage.success('修改成功')
        setTimeout(() => {
          router.push('/release')
        },2000)
      } else {
        ElMessage.warning(res.msg)
      }
    }).catch((err:any) =>{
      console.log(err)
      LoadingBool.value = false
    })
  } else {
    createRequirement(submitData.value).then((res:any) => {
      LoadingBool.value = false
      if (res.code === 200) {
        ElMessage.success('发布成功')
        setTimeout(() => {
          router.push('/release')
        },2000)
      } else {
        ElMessage.warning(res.msg)
      }
    }).catch((err:any) =>{
      console.log(err)
      LoadingBool.value = false
    })
  }
}
if (route.query.id) {
  detailApi({
    id: route.query.id
  }).then((res:any) => {
    for (const i in submitData.value) {
      submitData.value[i] = res.data[i]
    }
    if (res.data.domainList && res.data.domainList.length > 0) {
      submitData.value.requirementDomainId = res.data.domainList.map((item:any) => { return item.requirementDomainId })
    } else {
      submitData.value.requirementDomainId = []
    }
    if (res.data.areaList && res.data.areaList.length > 0) {
      submitData.value.requirementAreaId = res.data.areaList.map((item:any) => { return item.requirementAreaId })
    } else {
      submitData.value.requirementAreaId = []
    }
    imgList.value = []
    if (res.data.imageList.length > 0) {
      res.data.imageList.forEach((item:any) => {
        imgList.value.push({
          url: item
        })
      })
    }
  })
} else {
  userInfoApi().then((res:any) => {
    if (res.data.remarkMobile) {
      submitData.value.requirementContactMobile = res.data.remarkMobile
    }
    if (res.data.wechatNum) {
      submitData.value.requirementWechat = res.data.wechatNum
    }
    if (res.data.companyName) {
      companyInfo.value.companyName = res.data.companyName
    }
    if (res.data.nickname) {
    companyInfo.value.nickname = res.data.nickname
    }
    if (res.data.brand) {
      companyInfo.value.brand = res.data.brand

    }
   if (res.data.jobTitle) {
        companyInfo.value.jobTitle = res.data.jobTitle
      }
  })
}
const selectDomain = (data:any) => {
  if (submitData.value.requirementDomainId.indexOf(data) === -1) {
    submitData.value.requirementDomainId.push(data)
  } else {
    submitData.value.requirementDomainId = submitData.value.requirementDomainId.filter(item => item !== data);
  }
}
const selectArea = (data:any) => {
  if (submitData.value.requirementAreaId.indexOf(data) === -1) {
    submitData.value.requirementAreaId.push(data)
  } else {
    submitData.value.requirementAreaId = submitData.value.requirementAreaId.filter(item => item !== data);
  }
}
const toMy = () => {
  router.push('/my')
}
const closePerfect = () => {
  perfectBool.value = false
  companyInfo.value.nickname = ''
  companyInfo.value.brand = ''
  companyInfo.value.jobTitle = ''
  companyInfo.value.companyName = ''
}
const perfectSubmit = () => {
  if (!companyInfo.value.nickname) {
    ElMessage.warning('请输入姓名')
    return false
  }
  if (!companyInfo.value.companyName) {
    ElMessage.warning('请输入公司')
    return false
  }
  if (!companyInfo.value.jobTitle) {
    ElMessage.warning('请输入职位')
    return false
  }
  if (!companyInfo.value.brand) {
    ElMessage.warning('请输入品牌')
    return false
  }
  perfectLoading.value = true
  editCompanyInfo(companyInfo.value).then((res:any) => {
    perfectLoading.value = false
    if (res.code === 200) {
      ElMessage.success('信息完善成功,请重新发布！')
      getIsCompleteCompanyInfo()
      closePerfect()
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((err:any) => {
    console.log(err)
    perfectLoading.value = false
  })
}
</script>
<style scoped>
.perfectAlert{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0,0,0,.5);
  left: 0;
  z-index: 909;
}
.form-label{
  color: #333;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 5px;
  display: inline-block;
}
.form-label span{
  color: red;
}
.perfectConWin{
  width: 520px;
  background: #fff;
  position: fixed;
  z-index: 910;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 25px;
  box-sizing: border-box;
  border-radius: 8px;
}
.perfectConWin-title{
  font-size: 15px;
  color: #333333;
}
.notice_publish {
  padding: 3px 20px;
  border-radius: 24px;
  margin-top: 5px;
  background-color: #ffd2d3;
  color: #c1291e;
  border: 1px solid #c1291e;
  letter-spacing: 1px;
}
.link{
  color: #c1291e;
  text-decoration: underline;
  cursor: pointer;
}
.right_arrow {
  width: 0;
  height: 0;
  border-width: 4px 0 4px 6px;
  border-style: solid;
  border-color: transparent transparent transparent #c1291e;
  display: inline-block;
  margin-left: 3px;
}
.screen-span span{
  cursor: pointer;
  //margin: 0 8px 0 0;
  padding: 0 7px;
  font-size: 14px;
  line-height: 25px;
  color: #999999;
  white-space: nowrap;
}
.screen-span span.thisCssNav{
  font-weight: bold;
  color: #409eff;
}
.screen-span{
  width: calc(100% - 4.5rem);
}
.publish_content {
  width: 1000px;
  margin: 20px auto;
  background: #fff;
  padding: 20px 30px;
}
.common_container {
  background-color: #f3f3f3;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.tab_index {
  background: #e4e4e4;
  padding: 5px 5px;
  border-radius: 50px;
  zoom: 1;
  display: flex;
  width: 202px;
  box-sizing: border-box;
}
.tab_index .oneTab {
  font-size: 14px;
  line-height: 22px;
  padding: 2px 20px;
  cursor: pointer;
  color: #333;
}
.tab_index .oneTab.action{
  background: #409eff;
  color: #fff !important;
  border-radius: 15px;
  box-shadow: 0px 1px 2px #409eff;
}
.tab_index .oneTab:hover{
  color: #409eff;
}
:deep(.el-input__wrapper),:deep(.el-select__wrapper), :deep(.el-textarea__inner) {
  background-color: #f5f5f5 !important;
}
.ptb20 {
  padding: 20px 0;
}
.border {
  border-bottom: 1px solid #e4e4e4;
}
.redd {
  color: red;
}
.font12 {
  font-size: 12px;
}
p{
  margin: 0;
}
.pt15 {
  padding-top: 15px;
}
.font14 {
  font-size: 14px;
}
.cl333 {
  color: #333;
}
.publish_input_need_all{
  width: 230px;
  margin-top: 10px;
}
.ml8 {
  margin-left: 8px;
}
.cl999 {
  color: #999;
}
.textarea_desc {
  margin-top: 10px;
  font-size: 14px;
}
.mt20 {
   margin-top: 20px;
}
.mb10{
  margin-bottom: 10px;
}
.icon-form-phone{
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("@/assets/image/mobile_icon.png") no-repeat;
  background-size: 100%;
  margin-right: 10px;
}
.icon-form-watch{
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("@/assets/image/wechat_icon.png") no-repeat;
  background-size: 100%;
  margin-right: 10px;
}
</style>